﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="GioHang.aspx.cs" Inherits="IMark.GioHang" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    <style type="text/css">
        @media (min-width: 992px){
        .product .p-wr:nth-child(5) {
        padding: 0px 15px 0 0px;
        }}
        @media (min-width: 768px){
        .product .p-wr:nth-child(5) {
        padding: 0 15px 0 0;
        }}
    </style>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="page-title">
            <h2>Giỏ hàng (<label id="count" runat="server"></label> Mặt Hàng)</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="row clearfix f-space10"></div>
    <div id="content" runat="server">

    </div>
    <div class="container">
        <div class="row"> 
            <div class="col-md-8 col-sm-4 col-xs-12 cart-box-wr">
              <a class="btn large color1 pull-right" href="ThanhToanStep1.aspx">Thanh Toán</a>
                <span class="pull-right">&nbsp;</span>
                <a class="btn large color1 pull-right" href="/">Tiếp Tục Mua Hàng</a>
                <div class="clearfix f-space30"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 cart-box-wr">
              <div class="box-content">
                <div class="cart-box-tm">
                  <div class="tm1">Tổng Tiền</div>
                  <div class="tm2" id="TongT" runat="server"></div>
                </div>
                <div class="clearfix f-space10"></div>
                <div class="cart-box-tm">
                  <div class="tm1">VAT (10%) </div>
                  <div class="tm2" id="vat" runat="server"></div>
                </div>
                <div class="clearfix f-space10"></div>
                <div class="cart-box-tm">
                  <div class="tm3 bgcolor2">Thành Tiền </div>
                  <div class="tm4 bgcolor2" id="tongthanhtien" runat="server"></div>
                </div>
                <div class="clearfix f-space10"></div>
                
              </div>
            </div>
        </div>
    </div>
    <script>
        $(".plusbtn").click(function () {
            updateSL($(this).data("id"));
        })
        $(".minusbtn").click(function () {
            updateSL($(this).data("id"));
        })
        $(".quantity-input").change(function () {
            updateSL($(this).data("id"));
        })
        $(".remove").click(function () {
            var ID = $(this).data("id");
            $.ajax({
                url: "/GioHang.aspx?DeleteCart=1&ID=" + ID,
                success: function (data) {
                    $("#row" + ID).remove();
                    var count = $("#<%=count.ClientID%>").html();
                    $("#<%=count.ClientID%>").html(count - 1);
                    var tien = data.split("@@@");
                    $("#<%=TongT.ClientID%>").html(tien[0]);
                    $("#<%=vat.ClientID%>").html(tien[1]);
                    $("#<%=tongthanhtien.ClientID%>").html(tien[2]);
                }
            })
        })
        updateSL = function (ID) {
            $.ajax({
                url: "/GioHang.aspx?UpdateCart=1&ID=" + ID + "&SL=" + $("#" + ID).val(),
                success:function(data)
                {
                    var tien = data.split("@@@");
                    $("#p" + ID).html(tien[0]);
                    $("#<%=TongT.ClientID%>").html(tien[1]);
                    $("#<%=vat.ClientID%>").html(tien[2]);
                    $("#<%=tongthanhtien.ClientID%>").html(tien[3]);
                }
            })
        }
    </script>
</asp:Content>
